import Base from '@/components/Base';
import { Button, Card } from 'antd';
import wallPaper from './script';

import styles from './index.less';

interface State {}

export default class Index extends Base<any, State> {
  public state: State = {};

  public async didShow() {}

  public async didMount() {
    wallPaper.init('canv');
  }

  public render() {
    const {} = this.state;
    return (
      <Card title="">
        <div className={styles.btns}>
          <Button
            type="primary"
            onClick={() => {
              if (!this.isPlaying) {
                this.playBeats(0);
              }
            }}
          >
            来点节奏
          </Button>
        </div>

        <canvas id="canv" style={{ width: '100%', height: '600px' }}></canvas>
      </Card>
    );
  }

  private BEATS: number[] = [
    1, 600, 600, 300, 300, 600, 300, 300, 300, 600, 300,
  ];
  private isPlaying: boolean = false;
  private playBeats = (ind: number) => {
    //节奏
    let time = this.BEATS[ind];
    this.isPlaying = false;
    if (!time) {
      return;
    }
    this.isPlaying = true;
    setTimeout(() => {
      wallPaper.multipleSplats(parseInt(String(Math.random() * 10)) + 5);
      this.playBeats(ind + 1);
    }, time);
  };
}
